/*
 * @Description: 订单详情-包车
 * @Author: ziwei.ma
 * @Date: 2019-07-23 16:30:25
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-08-29 16:01:04
 */

<template>
  <div id="app">
    <div v-show="showType===1">
      <order-status :orderDetailInfo="orderDetailInfo"></order-status>
      <order-information :orderDetailInfo="orderDetailInfo"></order-information>
      <order-number-detail :orderDetailInfo="orderDetailInfo"></order-number-detail>
      <buttons :orderDetailInfo="orderDetailInfo"></buttons>
      <payment ref="Payment"></payment>
    </div>
    <net-error
      v-show="showType===0"
      @click.native="afreshData"
    ></net-error>
  </div>
</template>

<script>
import OrderStatusVue from './components/OrderStatus.vue'
import OrderInformationVue from './components/OrderInformation'
import OrderNumberDetailVue from './components/OrderNumberDetail.vue'
import ButtonsVue from './components/Buttons.vue'
import PaymentVue from '../../components/Payment'
import { getOrderDetail } from './api/api'
import NetErrorVue from '../../components/NetError'
const SHOW_DATA = 1
const NET_ERROR = 0
export default {
  components: {
    'order-status': OrderStatusVue,
    'order-information': OrderInformationVue,
    'order-number-detail': OrderNumberDetailVue,
    'buttons': ButtonsVue,
    'payment': PaymentVue,
    'net-error': NetErrorVue
  },
  data() {
    return {
      orderDetailInfo: {},
      showType: 1
    }
  },
  mounted() {
    this.getOrderDetailData()
  },
  methods: {
    getOrderDetailData() {
      getOrderDetail().then(res => {
        this.orderDetailInfo = res
        this.showType = SHOW_DATA
      }).catch(err => {
        console.dir(err)
        if (err.error.code === 'ECONNABORTED') {
          this.showType = NET_ERROR
        }
      })
    },
    afreshData() {
      this.getOrderDetailData()
    }
  }
}
</script>

<style>
html,
body {
  height: 100%;
  background-color: #f2f5f6;
}
#app {
  height: 100%;
  padding: 32px;
  box-sizing: border-box;
}
.font_small {
  font-size: 12px; /*no*/
}
</style>
